<script>
import baseMiXin from "@/views/robotOffice/task/mixin/baseMiXin";

export default {
  name: "index",
  mixins: [baseMiXin],
  data() {
    return {
      form: {
        productIds: []
      }
    };
  },
  methods: {
    initParams({ productIds = [] }) {
      this.form.productIds = productIds.map(item => {
        return {
          value: item,
          key: Date.now(),
        };
      });
    },
    checkParam() {
      let flag;
      this.$refs.masterForm.validate((valid) => flag = valid)
      if (!flag){
        this.$message.warning("有监控编号暂未填写")
      }
      let arr = this.form.productIds.map(item => item.value);
      if (arr.some((v,i) => arr.indexOf(v) !== i)){
        this.$message.warning("存在重复的商品编号")
        return false;
      }
      return flag;
    },
    getParam() {
      return {
        productIds: this.form.productIds.map(item => item.value)
      };
    },
    handleAppend() {
      this.form.productIds.push({
        value: undefined,
        key: Date.now()
      });
    },
    cleanProductIds() {
      this.form.productIds = [];
    },
    deleteProductId(index) {
      this.form.productIds.splice(index, 1);
    }
  }
};
</script>

<template>
  <div>
    <div style="overflow-y: auto;max-height: 29vh">
      <el-form :model="form" ref="masterForm" size="mini" :inline="true">
        <el-form-item
          v-for="(t,i) in form.productIds"
          :label="'商品 ' + (i + 1)"
          :key=t.key
          :prop="'productIds.' + i + '.value'"
          :rules="[
            {required: true,message: '商品编号不能为空',trigger:'blur'},
            {type: 'number',message: '商品编号必须由数字组成',trigger:'blur'}
          ]"
        >
          <el-input v-model.number="t.value" :placeholder="'商品 '+ (i + 1)" clearable
                    style="width: 300px;margin-right: 5px;"></el-input>
          <el-tooltip effect="dark" content="移除该商品编号" placement="top-start">
            <em @click="deleteProductId(i)" class="el-icon-delete"
                style="font-size: 16px;font-weight: bold;color: #ff4757"></em>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center">
      <el-button type="success" size="small" @click="handleAppend">添加监控商品编号</el-button>
      <el-button type="info" size="small" @click="cleanProductIds">清空</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>